@import 'src/themes/mixins/mixins.scss';

.model-wrap {
  user-select: none;
	position: fixed;
  right: -0.40rem;
  bottom: 0;
  width: 3rem;
  height: 4rem;
  z-index: 10000;
	transition: all .3s ease-in-out;
	&:hover {
		.message, .change-model-tool , .hide-button {
			opacity: 1;
			display: block;
		}
	}
}

#live2d {
	position: relative;

}

.message {
  opacity: 0;
  width: 2.5rem;
  min-height: 0.7rem;
  bottom: 93%;
	right: 20%;
  padding: 5px 10px;
  border: 2px solid rgb(57, 57, 57);
  background-color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  position: absolute;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-name: shake;
  animation-timing-function: ease-in-out;
}

.hide-button {
  position: absolute;
  bottom: 80px;
  left: -50px;
  /* bottom: 30px; */
  overflow: hidden;
	/* padding: 4px; */
	display: none;
  width: 60px;
  height: 40px;
  line-height: 40px;
  border: 2px solid rgb(57, 57, 57);
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-name: shake;
  animation-timing-function: ease-in-out;
}

.hide-button:hover {
	color: #f4f6f8;				
	@include themify($themes) {
		background: themed('color');
	}
}

.change-model-tool {
	position: absolute;
	display: none;
    height: 400px;
	bottom: 150px;
	left: -50px;
	width: 200px;
    padding-left: 20px;
    overflow: auto;
	border: 2px solid rgb(57, 57, 57);
	background-color: #fff;
	text-align: left;
	font-size: 14px;
	cursor: pointer;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-name: shake;
	animation-timing-function: ease-in-out;
	li {
		height: 30px;
		line-height: 30px;
		&:hover {
			color: #f4f6f8;				
			@include themify($themes) {
				background: themed('color');
			}
		}
        &.model-li-avtive {
            color: #f4f6f8;				
            @include themify($themes) {
                background: themed('color');
            }
        }
	}

	
	
}
@media (max-width: 860px) {
  #landlord {
      display: none;
  }
}

@keyframes shake {
  2% {
      transform: translate(0.5px, -1.5px) rotate(-0.5deg);
  }

  4% {
      transform: translate(0.5px, 1.5px) rotate(1.5deg);
  }

  6% {
      transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  8% {
      transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  10% {
      transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }

  12% {
      transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }

  14% {
      transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }

  16% {
      transform: translate(-1.5px, -0.5px) rotate(1.5deg);
  }

  18% {
      transform: translate(0.5px, 0.5px) rotate(1.5deg);
  }

  20% {
      transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  22% {
      transform: translate(0.5px, -1.5px) rotate(1.5deg);
  }

  24% {
      transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
  }

  26% {
      transform: translate(1.5px, 0.5px) rotate(1.5deg);
  }

  28% {
      transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }

  30% {
      transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  32% {
      transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  34% {
      transform: translate(2.5px, 2.5px) rotate(-0.5deg);
  }

  36% {
      transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }

  38% {
      transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  40% {
      transform: translate(-0.5px, 2.5px) rotate(0.5deg);
  }

  42% {
      transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  44% {
      transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  46% {
      transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  48% {
      transform: translate(2.5px, -0.5px) rotate(0.5deg);
  }

  50% {
      transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  52% {
      transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }

  54% {
      transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  56% {
      transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  58% {
      transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  60% {
      transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  62% {
      transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  64% {
      transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }

  66% {
      transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  68% {
      transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  70% {
      transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  72% {
      transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }

  74% {
      transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  76% {
      transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  78% {
      transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  80% {
      transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  82% {
      transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  84% {
      transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  86% {
      transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  88% {
      transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  90% {
      transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  92% {
      transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  94% {
      transform: translate(0.5px, 0.5px) rotate(-0.5deg);
  }

  96% {
      transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  98% {
      transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
  }

  0%, 100% {
      transform: translate(0, 0) rotate(0);
  }
}
